<template>
    <div>
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
            <span>点击次数：{{ photoinfo.click }}次</span>
        </p>
        <hr>
        <div class="thumbs">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>

        <div class="content" v-html="photoinfo.content">
        </div>
    </div>
</template>

<script>
    export default {
       // name: "photoInfo",
        data() {
            return {
                id:this.$route.params.id,
                photoinfo:{},
                list:[]
            };
        },
        created(){
            this.getPhotoInfo()
            this.getThumbs()
        },
        methods:{
            getPhotoInfo(){
                this.$http.get('java/photos/getimageInfo'+ this.id + '.json').then(result=>{
                    if(result.body.status === 0){
                        this.photoinfo = result.body.message[0]
                    }
                })
            },
            getThumbs(){
                this.$http.get('java/photos/gethumimages'+ this.id + '.json').then(result=>{
                    if(result.body.status === 0)
                    {
                        result.body.message.forEach(item=>{
                            item.w=30
                            item.h=50
                            item.msrc = item.src;
                        });
                        this.list=result.body.message
                    }
                })
            },
            handleClose () {
                console.log('close event')
            }
        }
    }
</script>

<style>

    .my-gallery{

        display: flex;
    }

</style>

<style scoped lang="scss">





.thumbs{display: flex;
  img{
      width: 100%;
      height: auto;
  }

}
</style>